<!--
 * @Description: 
 * @Author: charles
 * @Date: 2021-05-05 22:02:56
<<<<<<< HEAD
<<<<<<< HEAD
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2022-01-10 21:48:27
=======
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2022-01-10 17:52:33
>>>>>>> 9412502b99b728a658dcbd89e9bfe2e3bf5302b5
-->
<template>
  <!--1. 容器 -->
  <div ref="bottom2_container" id="container" style="height: 95%"></div>
</template>
<script>
import {DualAxes} from '@antv/g2plot';
export default {
  data (){
    return{
      dataArr:[ 
        { date: "8:00", freePeople: 50, joinPeople:180 },
        { date: "9:00", freePeople: 89, joinPeople:164 },
        { date: "10:00", freePeople: 284, joinPeople:356 },
        { date: "11:00", freePeople: 123, joinPeople:244 },
        { date: "12:00", freePeople: 56, joinPeople:134 },
        { date: "13:00", freePeople: 44, joinPeople:76},
        { date: "14:00", freePeople: 13, joinPeople:64 },
        { date: "15:00", freePeople: 45, joinPeople:75 },
        { date: "16:00", freePeople: 64, joinPeople:156 },
        { date: "17:00", freePeople: 87, joinPeople:167 },
        { date: "18:00", freePeople: 134, joinPeople:187 },
        { date: "19:00", freePeople: 163, joinPeople:257 },
        { date: "20:00", freePeople: 74, joinPeople:125 }
      ]
    }
  },
  created(){
  
  },
  mounted(){
    this.initChart()
  },
  methods:{
    initChart(){
      const dualAxes = new DualAxes(this.$refs.bottom2_container,{
        data:[this.dataArr,this.dataArr],
        xField:'date',
        yField:['freePeople','joinPeople'],
        geometryOptions:[{
          geometry:'line',
          color:'#B10034',
        },
        {
          geometry:'line',
          color:'#5AD8A6',
        }
        ]
      })

      dualAxes.render();
    }
  }
}
</script>




